main.js ➔ stateBarMenu - Code Metrics - Inspection of "Merge pull request #1096 from wmde/so-many-changes" - wmde/FundraisingFrontend - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 3a5d30...efd5c6 )

by Jeroen De

created 2017-12-15 04:49 UTC

main.js ➔ stateBarMenu B

↳ Parent: skins/cat17/src/scripts/main.js

Complexity

Conditions	4
Paths	10

Size

Total Lines

143

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	4
c	1
b	0
f	0
nc	10
dl	0
loc	143
rs	8.1935
nop	0

2 Functions

Rating	Name	Duplication	Size	Complexity
A	main.js ➔ ... ➔ $.fn.isVisible	0	19	3
B	main.js ➔ ... ➔ $(window).scroll	0	33	5

How to fix Long Method

(function ($) {

    var init = function () {

        formInfosManager();

        stateBarMenu();

        heightInfo();

        containersManager();

        openCommentItem();


        // replace select elements
        jcf.replaceAll();


        selectedSelect();
    };

    $(document).ready(function () {
        init();
    });

    $(window).resize(function () {
        containersManager();
    });


    var openCommentItem = function () {
        var $element = $('.supporter-item.wrap-field.commented');
        if ($element.length) {
            $($element).on("click", function () {
                $(this).toggleClass("selected");
                $(this).children(".info-text").toggleClass("opened");
            });
        }
    };

    var containersManager = function () {
        var $element = $('.switch-container');
        if ($element.length) {
            if ($(window).width() < 660) {
                $($element).addClass("container-fluid no-gutter");
                $($element).removeClass("container");
            } else {
                $($element).addClass("container");
                $($element).removeClass("container-fluid no-gutter");
            }
        }
    };

    // TODO Move into View Handler
    var selectedSelect = function () {

        if ($(window).width() < 1024) {
            $('select#salutation').children('option.hideme').prop('disabled',true);
         }
        $("select").change(function () {
            $(this).closest("span.jcf-select").addClass("selected-item");
            $(this).next("span").addClass("selected-item");
        });
        $(".country-select").closest("span.jcf-select").addClass("selected-item");
        $(".country-select").next("span").addClass("selected-item");
    };

    var heightInfo = function () {

        $(".info-text").on("change", "input, select", function () {
            $(this).closest("fieldset").css("min-height", 0);
            var fieldsetHeight = $(this).closest("fieldset").height();

            var formHeight = $(this).closest(".info-text").prop('scrollHeight');
            $(this).closest("fieldset").css("min-height", formHeight + "px");
        });
    };

	// TODO Move into View Handler
    var formInfosManager = function () {
        var $element = $("section.donation-amount");
        if ($element.length) {
			if ( $( window ).width() < 1200 ) {
				$( '#overview' ).on( 'click', '.wrap-field.has-longtext.completed .wrap-input, .wrap-field.has-longtext.invalid .wrap-input', function (e) {
					e.preventDefault();
					$( this ).closest( '.wrap-field' ).toggleClass( 'opened' );
					$( this ).toggleClass( 'opened' );
					$( this ).next( '.info-text-bottom' ).toggleClass( 'opened' );
				} );
			}
        }
    };

    var stateBarMenu = function () {

        var ACTIVE_THRESHOLD = 55;

        $.fn.isVisible = function (type) {
            // Current distance from the top of the page
            var windowScrollTopView = $(window).scrollTop();
            // Current distance from the top of the page, plus the height of the window
            var windowBottomView = windowScrollTopView + $(window).height();
            // Element distance from top
            var elemTop = $(this).offset().top;
            // Element distance from top, plus the height of the element
            if (type == "top") {
                offset = 50;

            } else if (type == "button") {
                offset = 15;
            } else {
                offset = +380;
            }
            var elemBottom = elemTop + $(this).height() + offset;
            //console.log("wTop " + windowScrollTopView + " wB " + windowBottomView  + " eTop" + elemTop);
            return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
        };


        if ($('.state-bar').length == 0) return;
if (a > 0)
    b = 42;
        var fixBarTop = $('.state-bar').offset().top;
        var donationSection = $("#donation-amount").offset().top;
        var donationPaymentSection = $("#donation-payment").offset().top;
        var donationTypeSection = $("#donation-type").offset().top;

        if ($(window).width() < 1023) {
            $(window).scroll(function () {
                var currentScroll = $(window).scrollTop();
                if (currentScroll + 70 >= fixBarTop) {
                    $('.state-bar').addClass('active');
                    $('.fixed-button').addClass('active');
                    $('.menu-main').addClass('under-bar');

                    if ($('.footer').isVisible('top')) {
                        $('.menu-main').removeClass('under-bar');
                    } else {
                        $(".state-bar").addClass('active');
                        $('.menu-main').addClass('under-bar');
                    }

                    if ($('#submit-bottom').isVisible('button')) {
                        $('.fixed-button').removeClass('active');
                    } else {
                        $('.fixed-button').addClass('active');
                    }

                } else {
                    $('.state-bar').removeClass('active');
                    $('.menu-main').removeClass('under-bar');
                }
                if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
                    $('.state-overview .amount').addClass('enabled');
                } else {
                    $('.state-overview .amount').removeClass('enabled');
                }



            });
        } else {
            $(window).scroll(function () {
                var currentScroll = $(window).scrollTop();
                if ($('.page-donation').length) {
                    var initialTop = 200;
                } else if ($('.page-membership').length) {
                    var initialTop = 650;

                }


                if (currentScroll >= initialTop) {

                    $('.state-overview .wrap-bar').addClass('fixed');
                    //console.log("wrap bar" + currentScroll);
                } else {
                    $('.state-overview .wrap-bar').removeClass('fixed');
                }


                if (($('.state-bar-lateral .wrap-bar').outerHeight() + $('.state-bar-lateral .wrap-bar').offset().top ) > ( $('.form-shadow-wrap').offset().top + $('.form-shadow-wrap').outerHeight() + 150)) {
                    $('.state-bar-lateral').removeClass('active');
                } else {
                    $('.state-bar-lateral').addClass('active');
                }
            });
        }

        // TODO Include this only on mebership pages
        if ($(".page-membership").length) {
            var memberTypeSection = $("#membership-type").offset().top;
            $(window).scroll(function () {
                var currentScroll = $(window).scrollTop();
                var typeMemberElements = $('.state-overview .member-type');
                var donorElements = $('.state-overview .donor-type');
                var amountElements = $('.state-overview .amount');
                var paymentElemnts = $('.state-overview .payment-method');

                typeMemberElements.removeClass('enabled');
                donorElements.removeClass('enabled');
                amountElements.removeClass('enabled');
                paymentElemnts.removeClass('enabled');
                ACTIVE_THRESHOLD = 60;
                if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
                    paymentElemnts.addClass('enabled');
                }
                else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
                    amountElements.addClass('enabled');
                }
                else if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
                    donorElements.addClass('enabled');
                }
                else if (currentScroll >= memberTypeSection - ACTIVE_THRESHOLD) {
                    typeMemberElements.addClass('enabled');
                }
            });
        } else {
            // TODO include only on donation pages?
            $(window).scroll(function () {
                var currentScroll = $(window).scrollTop();
                var amountElements = $('.state-overview .amount');
                var paymentElemnts = $('.state-overview .payment-method');
                var donorElements = $('.state-overview .donor-type');

                amountElements.removeClass('enabled');
                paymentElemnts.removeClass('enabled');
                donorElements.removeClass('enabled');
                if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
                    donorElements.addClass('enabled');
                }
                else if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
                    paymentElemnts.addClass('enabled');
                }
                else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
                    amountElements.addClass('enabled');
                }
            });
        }

    };

})(jQuery);


1			(function ($) {
2
3			var init = function () {
4
5			formInfosManager();
6
7			stateBarMenu();
8
9			heightInfo();
10
11			containersManager();
12
13			openCommentItem();
14
15
16			// replace select elements
17			jcf.replaceAll();
			0 ignored issues – show Bug introduced 2017-11-02 17:26 UTC by Report Bug Copy Issue Report The variable `jcf` seems to be never declared. If this is a global, consider adding a `/** global: jcf */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
18
19			selectedSelect();
20			};
21
22			$(document).ready(function () {
23			init();
24			});
25
26			$(window).resize(function () {
27			containersManager();
28			});
29
30
31			var openCommentItem = function () {
32			var $element = $('.supporter-item.wrap-field.commented');
33			if ($element.length) {
34			$($element).on("click", function () {
35			$(this).toggleClass("selected");
36			$(this).children(".info-text").toggleClass("opened");
37			});
38			}
39			};
40
41			var containersManager = function () {
42			var $element = $('.switch-container');
43			if ($element.length) {
44			if ($(window).width() < 660) {
45			$($element).addClass("container-fluid no-gutter");
46			$($element).removeClass("container");
47			} else {
48			$($element).addClass("container");
49			$($element).removeClass("container-fluid no-gutter");
50			}
51			}
52			};
53
54			// TODO Move into View Handler
55			var selectedSelect = function () {
56
57			if ($(window).width() < 1024) {
58			$('select#salutation').children('option.hideme').prop('disabled',true);
59			}
60			$("select").change(function () {
61			$(this).closest("span.jcf-select").addClass("selected-item");
62			$(this).next("span").addClass("selected-item");
63			});
64			$(".country-select").closest("span.jcf-select").addClass("selected-item");
65			$(".country-select").next("span").addClass("selected-item");
66			};
67
68			var heightInfo = function () {
69
70			$(".info-text").on("change", "input, select", function () {
71			$(this).closest("fieldset").css("min-height", 0);
72			var fieldsetHeight = $(this).closest("fieldset").height();
			0 ignored issues – show Unused Code introduced 2017-11-08 19:11 UTC by Report Bug Copy Issue Report The variable `fieldsetHeight` seems to be never used. Consider removing it. Loading history...
73			var formHeight = $(this).closest(".info-text").prop('scrollHeight');
74			$(this).closest("fieldset").css("min-height", formHeight + "px");
75			});
76			};
77
78			// TODO Move into View Handler
79			var formInfosManager = function () {
80			var $element = $("section.donation-amount");
81			if ($element.length) {
82			if ( $( window ).width() < 1200 ) {
83			$( '#overview' ).on( 'click', '.wrap-field.has-longtext.completed .wrap-input, .wrap-field.has-longtext.invalid .wrap-input', function (e) {
84			e.preventDefault();
85			$( this ).closest( '.wrap-field' ).toggleClass( 'opened' );
86			$( this ).toggleClass( 'opened' );
87			$( this ).next( '.info-text-bottom' ).toggleClass( 'opened' );
88			} );
89			}
90			}
91			};
92
93			var stateBarMenu = function () {
94
95			var ACTIVE_THRESHOLD = 55;
96
97			$.fn.isVisible = function (type) {
98			// Current distance from the top of the page
99			var windowScrollTopView = $(window).scrollTop();
100			// Current distance from the top of the page, plus the height of the window
101			var windowBottomView = windowScrollTopView + $(window).height();
102			// Element distance from top
103			var elemTop = $(this).offset().top;
104			// Element distance from top, plus the height of the element
105			if (type == "top") {
106			offset = 50;
			0 ignored issues – show Bug introduced 2017-11-08 19:11 UTC by Report Bug Copy Issue Report The variable `offset` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window.offset`. Loading history...
107			} else if (type == "button") {
108			offset = 15;
109			} else {
110			offset = +380;
111			}
112			var elemBottom = elemTop + $(this).height() + offset;
113			//console.log("wTop " + windowScrollTopView + " wB " + windowBottomView + " eTop" + elemTop);
114			return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
115			};
116
117
118			if ($('.state-bar').length == 0) return;
			0 ignored issues – show Coding Style Best Practice introduced 2017-11-02 17:26 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
119			var fixBarTop = $('.state-bar').offset().top;
120			var donationSection = $("#donation-amount").offset().top;
121			var donationPaymentSection = $("#donation-payment").offset().top;
122			var donationTypeSection = $("#donation-type").offset().top;
123
124			if ($(window).width() < 1023) {
125			$(window).scroll(function () {
126			var currentScroll = $(window).scrollTop();
127			if (currentScroll + 70 >= fixBarTop) {
128			$('.state-bar').addClass('active');
129			$('.fixed-button').addClass('active');
130			$('.menu-main').addClass('under-bar');
131
132			if ($('.footer').isVisible('top')) {
133			$('.menu-main').removeClass('under-bar');
134			} else {
135			$(".state-bar").addClass('active');
136			$('.menu-main').addClass('under-bar');
137			}
138
139			if ($('#submit-bottom').isVisible('button')) {
140			$('.fixed-button').removeClass('active');
141			} else {
142			$('.fixed-button').addClass('active');
143			}
144
145			} else {
146			$('.state-bar').removeClass('active');
147			$('.menu-main').removeClass('under-bar');
148			}
149			if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
150			$('.state-overview .amount').addClass('enabled');
151			} else {
152			$('.state-overview .amount').removeClass('enabled');
153			}
154
155
156
157			});
158			} else {
159			$(window).scroll(function () {
160			var currentScroll = $(window).scrollTop();
161			if ($('.page-donation').length) {
162			var initialTop = 200;
163			} else if ($('.page-membership').length) {
164			var initialTop = 650;
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2017-11-02 17:26 UTC by Report Bug Copy Issue Report The variable `initialTop` already seems to be declared on line `162`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
165			}
166
167
168			if (currentScroll >= initialTop) {
			0 ignored issues – show Bug introduced 2017-11-10 21:08 UTC by Report Bug Copy Issue Report The variable `initialTop` does not seem to be initialized in case `$(".page-membership").length` on line `163` is `false`. Are you sure this can never be the case? Loading history...
169			$('.state-overview .wrap-bar').addClass('fixed');
170			//console.log("wrap bar" + currentScroll);
171			} else {
172			$('.state-overview .wrap-bar').removeClass('fixed');
173			}
174
175
176			if (($('.state-bar-lateral .wrap-bar').outerHeight() + $('.state-bar-lateral .wrap-bar').offset().top ) > ( $('.form-shadow-wrap').offset().top + $('.form-shadow-wrap').outerHeight() + 150)) {
177			$('.state-bar-lateral').removeClass('active');
178			} else {
179			$('.state-bar-lateral').addClass('active');
180			}
181			});
182			}
183
184			// TODO Include this only on mebership pages
185			if ($(".page-membership").length) {
186			var memberTypeSection = $("#membership-type").offset().top;
187			$(window).scroll(function () {
188			var currentScroll = $(window).scrollTop();
189			var typeMemberElements = $('.state-overview .member-type');
190			var donorElements = $('.state-overview .donor-type');
191			var amountElements = $('.state-overview .amount');
192			var paymentElemnts = $('.state-overview .payment-method');
193
194			typeMemberElements.removeClass('enabled');
195			donorElements.removeClass('enabled');
196			amountElements.removeClass('enabled');
197			paymentElemnts.removeClass('enabled');
198			ACTIVE_THRESHOLD = 60;
199			if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
200			paymentElemnts.addClass('enabled');
201			}
202			else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
203			amountElements.addClass('enabled');
204			}
205			else if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
206			donorElements.addClass('enabled');
207			}
208			else if (currentScroll >= memberTypeSection - ACTIVE_THRESHOLD) {
209			typeMemberElements.addClass('enabled');
210			}
211			});
212			} else {
213			// TODO include only on donation pages?
214			$(window).scroll(function () {
215			var currentScroll = $(window).scrollTop();
216			var amountElements = $('.state-overview .amount');
217			var paymentElemnts = $('.state-overview .payment-method');
218			var donorElements = $('.state-overview .donor-type');
219
220			amountElements.removeClass('enabled');
221			paymentElemnts.removeClass('enabled');
222			donorElements.removeClass('enabled');
223			if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
224			donorElements.addClass('enabled');
225			}
226			else if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
227			paymentElemnts.addClass('enabled');
228			}
229			else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
230			amountElements.addClass('enabled');
231			}
232			});
233			}
234
235			};
236
237			})(jQuery);
238

wmde / FundraisingFrontend

Push — master ( 3a5d30...efd5c6 )

main.js ➔ stateBarMenu B

Complexity

Size

Duplication

Importance

2 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like